<template>
	<view class="wrap">
		<view class="zhibowarp" v-for="(item, index) in roomList" :key="index" @click="gotoRoom(item.id)">
			<view class="zhiboItem">
				<view class="zhibo_cover">
					<u-image width="100%" height="360rpx" :src="item.image.file_url"></u-image>
				</view>
				<view class="zhibo_title">
					{{item.title}}
				</view>
				<view class="cardFooter">
					<view class="price_txt">
						<view class="price"> 
							{{item.points}}积分
						</view>	
					</view>
				</view>
			</view>
		</view>
		<login-model ref="loginModel"></login-model>
	</view>
</template>

<script>
	import loginModel from "@/components/public/loginModel.vue";
	import {exchangeList,isLogin} from "@/common/api.js";
	export default {
		components: {
			loginModel
		},
		data() {
			return {
				goodsSize: 10,
				roomTotal:0,
				roomList:[]
			}
		},
		onLoad(options) {
			isLogin(this,{type:0});
			this.goodsStart = 1;
			this.getZbList();
		},
		onReady() {
			//this.$refs.uDropdown.highlight(0);
		},
		methods: {
			getZbList(){
				exchangeList(this,{page:this.goodsStart,limit:this.goodsSize})
			},
			gotoRoom:function(roomId){
				uni.navigateTo({
					url:'/exchange/goodsDetail?active_id='+roomId
				})
			}
		}
	}
</script>

<style>
.wrap{min-height: 0;overflow: hidden;padding:5rpx;}
.zhibowarp{
	width:50%;min-height: 0;overflow: hidden;float:left;
}

.zhiboItem{
	margin:15rpx;min-height: 0;overflow:hidden;
	box-shadow:0 0 15rpx #ccc;border-radius: 10rpx;
	position: relative;
}
.zhibo_cover{width:100%;height:360rpx;overflow: hidden;border-radius: 10rpx 10rpx 0 0;}
.zhibo_cover image{width:100%}
.zhibo_title{
	height:80rpx;margin:0 10rpx;
	line-height: 80rpx;overflow: hidden;
	font-size: 30rpx;color:#222
}
.cardFooter{
	padding:0 15rpx 15rpx;
	margin-top: 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}
.price_txt{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
.price {
	font-size: 30rpx;
	color: #FA3534;
	margin-top: 10rpx;
}
.hd_online{position: absolute;top:10rpx;right:10rpx;height:50rpx;border-radius: 50rpx;color:#fff;border:2rpx solid #fff;padding:0 30rpx;background-color: rgba(0,0,0,0.3);line-height: 50rpx;}
</style>
